<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.divbox{
				height:500px;
				width:500px;
				background-color: #0082D6;
			}
			p{
				height:300px;
				width:300px;
				background-color: #00FF3C;
			}
			span{
				display: block;
				height:100px;
				width:100px;
				background-color: #888888;
			}
		</style>
	</head>
	<body>
		11. ****v-on 绑定事件
		简写：@
	    参数：$event---事件对象
        方法参数：默认e,事件对象
		
		修饰符:
		1. 事件修饰符
		   .stop:取消冒泡
		   .prevent取消事件默认行为
		   .capture:捕获方向触发事件
		   .passive不阻止事件默认行为
		   .self 触发事件，只触发自己(文本)的事件，子元素都不可以
		   .once 只触发一次
		   
		2. 按键修饰符
		3. 鼠标修饰符
		4. 其他修饰符
		<div id="app">
            <button @click="show(2,3,$event)">点击</button>
			<button @click.once="showb">点击b</button>
			
			<button @contextmenu.prevent="showb">右键单击</button>
			
	        <h1 @click.self="showb">
				哈哈
				<i>iiiii</i>
			</h1>
			
			<div class="divbox" @click.capture="divevent">
				<p @click.capture="pevent">
					<span @click.capture="spanevent"></span>
				</p>
			</div>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
				  
				},
				methods:{
					show(n,m,e){
						console.log(n,m,e);
					},
					showb(e){
						console.log(e);
					},
					divevent(){
						alert("divbox");
					},
					pevent(){
						alert("pbox");
					},
					spanevent(){
						alert("spanbox");
					}
				}
			})
		</script>
	</body>
</html>
